<template>
  <div class="home-countdown">
<!--    banner栏 由倒计时和轮播图构成-->
    <div class="home-countdown__info">
      <img class="logo" src="@/assets/imgs/index_page/count-down.png" />
      <span class="number">{{ padStart(current.hours) }}</span>
      <span class="colon">:</span>
      <span class="number">{{ padStart(current.minutes) }}</span>
      <span class="colon">:</span>
      <span class="number">{{ padStart(current.seconds) }}</span>
    </div>
    <div class="home-countdown__goods">
      <div class="banner_left_content_left">
        <p class="banner_left_content_left__title"> 一起来嗨</p>
        <el-button size="small" type="primary" round>去看看</el-button>
      </div>
      <div class="banner_left_content_right">
        <img src="../../../../../public/BannerImg/banner04.png" alt=""/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import{useCountDown} from "@/use/useCountDown.ts";

const time = new Date(); // 获取当前时间
const timeToCountDown = time.getTime() / 1000; // 将当前时间转换为秒
const countDown=useCountDown({
  // 传入当前时间
  time:24 * 60 * 60 * 1000
})
//开始计时
countDown.start();
const {current}=countDown;

//倒计时填充函数
const padStart = (num: number) => {
  return num.toString().padStart(2, '0')
}
</script>

<style scoped lang="scss">
.home-countdown {
  flex:5;
  border-radius: 8px;
  width: 180px;
  height: 170px;
  background: linear-gradient(to bottom, rgb(252, 202, 202), white, white, white);
  padding: 15px 10px;
  box-sizing: border-box;
  justify-content: flex-end;

  &__info {
    display: flex;
    align-items: center;
    .logo {
      width: 80px;
      margin-right: 8px;
    }
    .number {
      font-size: 12px;
      background: rgb(252, 78, 78);
      color: white;
      padding: 2px;
      border-radius: 2px;
      width: 16px;
      font-weight: bold;
    }
    .colon {
      margin: 0 1px;
      color: red;
    }
  }

  &__goods {
    display: flex;
    margin-top: 8px;
    .banner_left_content_left{
      flex: 7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &__title{
        font-size: 3.5vw;
        font-weight: bolder;
        font-style: normal;
      }

    }
    .banner_left_content_right{
      flex: 7;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 25vw;
        height: 25vw;
        display: flex;
        justify-content: center;
        align-items: center;

      }
    }
  }
}
</style>